<template>
    <div class="site-aside-container">
        <!-- <Avatar :url="avatarImg"></Avatar> -->
        <Avatar v-if="!loadingRef" :url="dataRef!.avatar"></Avatar>
        <Menu></Menu>
        <Contact></Contact>
        <footer>
            黑ICP备17001719号
        </footer>
    </div>
</template>
<script setup lang='ts'>
import Avatar from '~@/components/Avatar/index.vue';
import Menu from '~@/components/SiteAside/Menu/index.vue';
import Contact from '~@/components/SiteAside/Contact/index.vue'
import avatarImg from '~@/assets/avatar1.jpg'
import { useSettingsStore } from '~@/store/modules/settings';
import {storeToRefs} from 'pinia'


    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
    
    const settingStore=useSettingsStore();
    const {loadingRef,dataRef}=storeToRefs(settingStore)
    
</script>
<style lang='less' scoped>
    .site-aside-container{
        width: 100%;
        height: 100%;
        background: @dark;
        padding: 20px 0;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        
        & .avatar-container{
            // text-align: center;
            margin-left: 22px;
        }

        &.title{
            font-size: 1.2em;
            color: #fff;
            text-align: center;
        }
        footer{
            text-align: center;
            font-size: 12px;
        }
    }
    

</style>